<template>
  <div class="fixed">
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容" name="1">
        <ul class="content-list" style="margin-bottom:20px">
          <li>
            <span>定位样式：</span>
            <div>
              <el-radio v-model="styles.module" label="1">模式一</el-radio>
              <el-radio v-model="styles.module" label="2">模式二</el-radio>
              <el-radio v-model="styles.module" label="3">模式三</el-radio>
              <el-radio v-model="styles.module" label="4">模式四</el-radio>
            </div>
          </li>
          <li>
            <span>背景图片：</span>
            <div>
              <el-radio v-model="styles.orPic" label="2">是</el-radio>
              <el-radio v-model="styles.orPic" label="1">否</el-radio>
            </div>
          </li>
          <li v-if="styles.orPic==2">
            <span>悬浮：</span>
            <div>
              <el-radio v-model="styles.isFloat" label="2">是</el-radio>
              <el-radio v-model="styles.isFloat" label="1">否</el-radio>
            </div>
          </li>
        </ul>
        <submitPic v-if="styles.orPic==2"></submitPic>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="右侧内容" name="2">
        <div class="content">
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧文字1:</span>
            </el-col>
            <el-col :span="19">
              <el-input
                size="small"
                style="width:330px"
                v-model="styles.upLoad1.text"
                maxlength="2"
                show-word-limit
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧图标1：</span>
            </el-col>
            <el-col :span="19">
              <upLoadImage :v="upLoad1" :height="50"></upLoadImage>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧链接1：</span>
            </el-col>
            <el-col :span="19">
              <upLoadUrl :v="upLoad1" :width="330"></upLoadUrl>
            </el-col>
          </el-row>
        </div>
        <div class="content">
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧文字2：</span>
            </el-col>
            <el-col :span="19">
              <el-input
                size="small"
                style="width:330px"
                v-model="styles.upLoad2.text"
                maxlength="2"
                show-word-limit
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧图标2：</span>
            </el-col>
            <el-col :span="19">
              <upLoadImage :v="upLoad2" :height="50"></upLoadImage>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧链接2：</span>
            </el-col>
            <el-col :span="19">
              <upLoadUrl :v="upLoad2" :width="330"></upLoadUrl>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames4">
      <el-collapse-item title="悬浮样式" name="4">
        <div class="content">
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>左侧文字:</span>
            </el-col>
            <el-col :span="19">
              <el-input
                size="small"
                style="width:330px"
                v-model="styles.floatUrl1.text"
                maxlength="6"
                show-word-limit
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>左侧图标：</span>
            </el-col>
            <el-col :span="19">
              <upLoadImage :v="floatUrl1" :height="50"></upLoadImage>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>左侧链接：</span>
            </el-col>
            <el-col :span="19">
              <upLoadUrl :v="floatUrl1" :width="330"></upLoadUrl>
            </el-col>
          </el-row>
        </div>
        <div class="content">
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧文字:</span>
            </el-col>
            <el-col :span="19">
              <el-input
                size="small"
                style="width:330px"
                v-model="styles.floatUrl2.text"
                maxlength="6"
                show-word-limit
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧图标：</span>
            </el-col>
            <el-col :span="19">
              <upLoadImage :v="floatUrl2" :height="50"></upLoadImage>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>右侧链接：</span>
            </el-col>
            <el-col :span="19">
              <upLoadUrl :v="floatUrl2" :width="330"></upLoadUrl>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames3">
      <el-collapse-item title="内容样式" name="3">
        <ul class="content-list">
          <li>
            <span>文字颜色：</span>
            <div>
              <colorSetting v-model="styles.colorWord" :originColor="styles.colorWord" initColor="#333"></colorSetting>
            </div>
          </li>
          <li>
            <span>背景颜色：</span>
            <div>
              <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#FFFFFF"></colorSetting>
            </div>
          </li>
          <li>
            <span>透明度：</span>
            <div>
              <edgeSetting v-model="styles.percent" unit="px" :max="100" :init="Number(styles.percent)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import edgeSetting from "../../comm/edgeSetting";
import colorSetting from "../../comm/colorSetting";
import submitPic from "../../comm/submitPic";
import upLoadUrl from "../../comm/uploadUrl";
import upLoadImage from "../../comm/upLoadImage";
export default {
  name: "fixed",
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
      activeNames3: "3",
      activeNames4: "4",
    };
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    upLoad1() {
      return this.list[this.currentId].styles.upLoad1;
    },
    upLoad2() {
      return this.list[this.currentId].styles.upLoad2;
    },
    floatUrl1() {
      return this.list[this.currentId].styles.floatUrl1;
    },
    floatUrl2() {
      return this.list[this.currentId].styles.floatUrl2;
    },
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  components: {
    edgeSetting,
    colorSetting,
    submitPic,
    upLoadUrl,
    upLoadImage,
  },
};
</script>


<style lang="less" scoped>
@import url("../../../assets/css/base.less");
.content {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 4px;
}
</style>
